<template>
  <view class="view-person">
    <nut-popup
      position="bottom"
      round
      :style="{ height: '86%' }"
      v-model:visible="state.isVisible"
    >
      <view class="popup-person-content">
        <view class="popup-content-box">
          <view class="popup-content-title" v-if="!props.isDetail">
            <view
              class="popup-cancel"
              @click="cancel"
              >取消</view
            >
            <view class="popup-title">已选负责人({{ selecteduserList?.length }})</view>
            <view
              class="popup-confirm"
              @click="addUserPopup"
              >添加</view
            >
          </view>
          <view class="popup-view-person">
            <view
              class="view-person-item"
              v-for="(item,index) in selecteduserList"
              :key="index"
            >
              <view class="view-person-item-left">
                <img
                  :src="item.avatarUrls"
                  alt=""
                />
                <text>{{ item.nickName }}</text>
              </view>
              <view class="view-person-item-right" v-if="!props.isDetail">
                <i v-if="!props.isDetail"
                  class="iconfont icon-cha"
                  @click="deleteUser(item)"
                ></i>
              </view>
            </view>
          </view>
        </view>
      </view>
    </nut-popup>
  </view>
</template>

<script setup lang="ts">
import { reactive, watch, ref, onMounted } from "vue";
import Taro from "@tarojs/taro";
import { userInfoStore } from "@/stores/userInfoStore";
const store = userInfoStore();
const emit = defineEmits(["update:visible", "selectedUsers"]);
const props = defineProps(["isviewPersonPopup", "feedbackUsers",'isDetail']);
const selecteduserList = ref([]);

const state = reactive({
  isVisible: props.isviewPersonPopup,
});
watch(
  () => props.isviewPersonPopup,
  newVal => {
    state.isVisible = newVal;
  },
);
watch(
  () => props.feedbackUsers,
  val => {
    selecteduserList.value = val;
    // console.log(selecteduserList.value, "selecteduserList666");
  },
);
watch(
  () => state.isVisible,
  val => {
    emit("update:visible", val);
  },
);
// const setSelectedUserList = item => {
//   store.setUserPopup(item);
// };
const addUserPopup = () => {
  emit("selectedUsers", selecteduserList.value);
  state.isVisible = false;
  emit("update:visible", false);
  store.setUserPopup();
};
const deleteUser = item => {
  selecteduserList.value = selecteduserList.value.filter(i => i.userId !== item.userId);
  emit("selectedUsers", selecteduserList.value);
  
};
const cancel = () => {
  state.isVisible = false;
  emit("update:visible", false);
};
</script>

<style lang="less">
@import "./index.less";
</style>
